<template>
	<div>
		<div class="tableNavBox">
			<div>
				<el-form ref="form" :validate-on-rule-change="false" :model="postData"  :rules="rules" class="demo-form-inline" label-width="20%" >
                    <el-col v-for="(item,index) in formSet" :key="index" :span="item.span">
                        <!-- 是否会用到插槽 -->
                        <template v-if="item.type == 'slot'">
                          <slot :name="item.prop" :item="item" />
                        </template>
                         <template v-else>
					    <el-form-item v-if="item.type == 'input'" :label="item.label" :rules="item.rules" :prop="item.prop" :style="{width: item.labelWidth?item.labelWidth:''}">
					    	<el-input :type="item.typeInput" :style="{width: item.width?item.width:'500px'}" v-model="postData[item.prop]" :disabled="item.disabled" class="formInput" @blur='inputBlur(item.prop,postData[item.prop])' :placeholder="item.placeholder">
							  	<!-- 后置内容，单位啥的 -->
							  	<template slot="append" v-if="item.append">{{item.append}}</template>
							  </el-input>
              </el-form-item>

						  <el-form-item v-if="item.type == 'select'" :label="item.label" :rules="item.rules" :prop="item.prop" :style="{width: item.labelWidth?item.labelWidth:''}">
                <el-select  :no-data-text="item.noData"  :style="{width: item.width?item.width:'500px'}" v-model="postData[item.prop]" :disabled="item.disabled" :placeholder="item.placeholder" @change="selectChange(item.prop, postData[item.prop])">
					    		<el-option v-for="(op_item,op_index) in optionData[item.prop]" :key="op_index" :label="op_item.name" :value="op_item.value" >
								  </el-option>
					    	</el-select>
              </el-form-item>

						<el-form-item v-if="item.type == 'cascader'" :label="item.label" :rules="item.rules" :prop="item.prop" :style="{width: item.labelWidth?item.labelWidth:''}">
                <el-cascader
                ref="cascaderHandle"
                v-model="postData[item.prop]"
                class="tableInput"
                style="padding:0;margin:2px 0 0 8px"
								:style="item.style"
                :show-all-levels="item.showAll?item.showAll:false"
                :options="optionData[item.prop]"
                :props="{ checkStrictly: true, value: 'id', label: 'name' }"
                @change="blurSelect(postData[item.prop], item.prop)"
                >
                </el-cascader>
            </el-form-item>

						 <el-form-item v-if="item.type == 'select_img'" :label="item.label" :rules="item.rules" :prop="item.prop" :style="{width: item.labelWidth?item.labelWidth:''}">
                            <el-select  :no-data-text="item.noData"  :style="{width: item.width?item.width:'500px'}" v-model="postData[item.prop]" :disabled="item.disabled" :placeholder="item.placeholder" @change="selectChange(item.prop, postData[item.prop])">
					    		<el-option v-for="(op_item,op_index) in optionData[item.prop]" :key="op_index" :label="op_item.name" :value="op_item.value">
									<img :src="op_item.url" alt="" style="width:30px;height:30px;float:left">
									<span style="padding-left:10px">{{op_item.name}}</span>
								</el-option> 
					    	</el-select>
                        </el-form-item>
						
						<el-form-item v-if="item.type == 'colorPicker'" :label="item.label" :rules="item.rules" :style="{width: item.labelWidth?item.labelWidth:''}">
							<el-color-picker v-model="postData[item.prop]" :predefine="predefineColors"></el-color-picker>
                        </el-form-item>

						<el-form-item v-if="item.type == 'radio'" :label="item.label" :style="{width: item.labelWidth?item.labelWidth:''}">
							<el-radio-group v-model="postData[item.prop]" @change="$forceUpdate()">
  							  <el-radio v-for="(r_item,r_index) in optionData[item.prop]" :key="r_index" :label="r_item.value">{{r_item.label}}</el-radio>
  							</el-radio-group>
						</el-form-item>

						<el-form-item v-if="item.type == 'radio_custom'" :label="item.label" :style="{width: item.labelWidth?item.labelWidth:''}">
							<el-radio-group v-model="postData[item.prop]" style="width:800px" @change="radioCustomChange">
  							  <el-radio v-for="(r_item,r_index) in optionData[item.prop]" :key="r_index" :label="r_item.value" style="margin-bottom: 10px;">{{r_item.label}}</el-radio>
  							  <el-radio :label="optionData.custom[item.prop].value" style="margin-bottom: 10px;width:150px"><el-input v-model="optionData.custom[item.prop].value" @input="radioInput(optionData.custom[item.prop].value,item.prop)" placeholder="请输入内容"></el-input></el-radio>
  							</el-radio-group>
						</el-form-item>

						<el-form-item v-if="item.type == 'checkbox'" :label="item.label" :style="{width: item.labelWidth?item.labelWidth:''}">
							<el-checkbox-group v-model="postData[item.prop]" style="width:800px" :max="item.max" @change="checkboxG(postData[item.prop],item.prop)">
  								<el-checkbox v-for="(r_item,r_index) in optionData[item.prop]" :key="r_index" :label="r_item.value" :disabled="item.disabled">{{r_item.label}}</el-checkbox>
  							</el-checkbox-group>
						</el-form-item>

						<el-form-item v-if="item.type == 'textarea'" :label="item.label" :rules="item.rules" :style="{width: item.labelWidth?item.labelWidth:''}">
							<el-input
							  	type="textarea"
							  	:rows="item.rows"
								:disabled="item.disabled"
							  	placeholder="请输入内容"
							  	v-model="postData[item.prop]"
							  	:style="item.style">
							</el-input>
                        </el-form-item>
                        </template>
                    </el-col>
        			<div style="clear:both"></div>
					<div v-if="isDialog" style="display:flex;justify-content: space-around;border-top: 1px solid #DCDCDC;padding-top:20px;margin-top:20px;">
						<el-button round style="width:120px" type="" @click="close">取消</el-button>
						<el-button round style="width:120px" type="primary" @click="validateForm" >确定</el-button>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
        props:{
            formSet:{
                type:Array,
                default:[]
            },
            postData: { 
              //表单数据对象
              type: Object,
              required: true
            },
	   		optionData:{
				type: Object,
                default: () => {
                  return {}
                }
			},
			rules:{
				//验证规则数据
                type: Object,
                default: () => {
                  return {}
                }
			},
			isDialog:{
            	type: Boolean,
              	default: false
            },
        },
		components: {

		},
		data() {
			return {
				 predefineColors: [
        		  'rgb(255, 0, 0)',
        		  'rgb(255, 128, 0)',
        		  'rgb(255, 255, 0)',
        		  'rgb(128, 255, 0)',
        		  'rgb(0, 255, 0)',
        		  'rgb(0, 255, 128)',
        		  'rgb(0, 255, 255)',
        		  'rgb(0, 128, 255)',
        		  'rgb(0, 0, 255)',
        		  'rgb(128, 0, 255)',
        		  'rgb(255, 0, 255)',
        		  'rgb(255, 0, 128)',
        		]
			}
		},
		created() {
		},
		mounted() {
			this.$nextTick(function() {
        	    this.$on('close', function() {
        	        this.$refs['form'].resetFields()
        	    });
        	});
		},
		watch: {
		},
		methods: {
			checkboxG(e,prop){
				this.$forceUpdate()
				 let data = {e:e, prop:prop}
         	this.$emit('checkboxG', data)
			},
      radioInput(e,prop){
         console.log(e,prop,'Input');
         let data = {e:e, prop:prop}
         this.$emit('radioInputChange', data)
      },
      radioCustomChange(e){
        // console.log(e,'radioCustomChange');
        // this.$emit('radioCustomChange', e)
      },
			inputBlur(prop, e){
				let data = {prop:prop, e:e}
				this.$emit('inputBlur', data)
			},
      selectChange(prop,data){
      },
			close(){
				this.$refs['form'].resetFields()
				this.$emit('close',false)
			},
			blurSelect(){

			},
	    validateForm() {
          //表单验证
          let flag = null
          this.$refs['form'].validate(valid => {
            if (valid) {
              flag = true
            } else {
              flag = false
            }
          })
            this.$emit('flag', flag)
          }
    }
	    }
</script>

<style scoped="scoped">
	.breadcrumb,
	.tableNavBox {
		/* padding: 20px; */
        width: 100%;
		display: block;
	}

	.tableNavBox {
		padding-top: 0;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.topButton {
		width: 78px;
	}
	.demo-form-inline {
		color: #5C5C5C;
	}

	.formInput {
		width: 500px;
	}

	.formInputNub {
		width: 100px;
		margin-right: 10px;
	}

	.formInputDatePicker {
		width: 440px;
		margin-right: 10px;
	}

	.dayNub {
		margin: 0 5px;
	}

	.btnBox {
		width: 100%;
		margin-top: 30px;
		padding: 30px 0;
		border-top: 1px solid #DCDCDC;
		text-align: center;
	}

	.btnBox button {
		width: 100px;
	}
	.expertTag{
		margin-right: 10px;
		margin-bottom: 10px;
	}
</style>
